<template>
  <div class="login-switch-container">
    <el-select v-model="currentMethod" placeholder="选择登录方式" class="login-select">
      <el-option
        v-for="method in loginMethods"
        :key="method.value"
        :label="method.label"
        :value="method.value"
      />
    </el-select>
    <component :is="currentComponent" @switch-method="switchMethod" @register="registerUser" />
  </div>
</template>

<script>
import Login from './Login.vue';
import LoginPhone from './LoginPhone.vue';
import faceLogin from '../views/faceLogin/index';
import Register from './Register.vue'; // 新增的注册组件

export default {
  data() {
    return {
      loginMethods: [
        { label: '账号登录', value: 'Login' },
        { label: '手机验证码登录', value: 'LoginPhone' },
        { label: '人脸识别登录', value: 'faceLogin' },
        { label: '注册', value: 'Register' },
      ],
      currentMethod: 'Login', // 初始为账号登录
    };
  },
  computed: {
    currentComponent() {
      return this.currentMethod;
    },
  },
  methods: {
    switchMethod(method) {
      this.currentMethod = method;
    },
    registerUser() {
      this.currentMethod = 'Register';
    },
  },
  components: {
    Login,
    LoginPhone,
    faceLogin,
    Register,
  },
};
</script>

<style scoped>
.login-switch-container {
  width: 500px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.login-select {
  margin-bottom: 20px;
  width: 100%;
}
</style>